/**
 * Login Page Class.
 */ 

/**
 * LoginProgress 
 * Used to manage the login&register on login&register page.
 * @access public
 * */
function UserForm($form,$progressBar){	
	this.form = $($form);
	this.form.find("p").hide();
	this.status = '0';
	this.progressBar = $($progressBar);
	//reset the progress bar's status
	this.progressBar.css("background-position","0 0");
	this.inputs = $($form + ' .input input');
	this.inputs.css("cursor","pointer");
	this.inputs.focus(this.lighting);
	this.inputs.blur($.proxy(this.validate, this));
	//travelsing all inputs to set each input's background
	for($i=0;$i<this.inputs.length;$i++){
		$posY = -(($i+1) * 51);
		$currentInput = this.inputs.eq($i);
		if(!$currentInput.val()){
			$currentInput.css("background-position","0 "+$posY+"px");
		}
	}
	//make label elements invisible
	$($form + ' label').css("display","none");
	//reset the progress bar
	this.setStatus();
	this.addDomain();
}

UserForm.prototype = {
	/**
	 * Set the form's status
	 * 
	 * @param the status number(optional)
	 * @access public
	 */
	setStatus: function($status){
		if($status == null){
			$status = this.getStatus();
		}
		$posY = -($status * 51);
		this.progressBar.css("background-position","0 "+$posY+"px");
		this.status = $status;
	},
	/**
	 * Change the current focused input's style
	 *
	 * @access public
	 */
	lighting: function(){
		$('.lighting').removeClass('lighting');
		$(this).addClass('lighting');
	},
	
	/**
	 * Validate inputs and show warning message on the view page
	 * 
	 * @param the current input's this pointer
	 * @access public
	 */
	validate: function(event){
		//this.setStatus(2);
		$input = $(document.getElementById(event.currentTarget.id));
		$('.lighting').removeClass('lighting');
		$num = Number($input.parent().index());
		$num -= 1;
		if($input.val()){
			$input.css("background-position","0 0");
		}else{
			$posY = -((($num)/2+1) * 51);
			$input.css("background-position","0 "+$posY+"px");
		}
		$type = $input.attr('id');
		$value = $input.val();
		switch($type){
			case 'UserEmail':
				if(!this.validateEmail($value)){
					$input.addClass("warning");
					$input.parent().next().show().text("invalid email");
				}else{
					$input.removeClass("warning");
					$input.parent().next().hide().text("");
				}
				this.setStatus();
				break;
			case 'UserPassword':
				if(!this.validatePassword($value, 4, 16)){
					$input.addClass("warning");
					$input.parent().next().show().text("password length should be between 4 and 16");
				}else{
					$input.removeClass("warning");
					$input.parent().next().hide().text("");
				}
				this.setStatus();
				break;
			case 'UserUrl':
				if(!this.validateUrl($value)){
					$input.addClass("warning");
					$input.parent().next().show().text("url invalid");
				}else{
					$input.removeClass("warning");
					$input.parent().next().hide().text("");
				}
				this.setStatus();
				break;
			default:break;
		}
	},
	/**
	 * Check all input's null or not to get the form's status
	 * 
	 * @return int Status number
	 * @access public
	 */
	getStatus: function(){
		$count = 0;
		for($i=0;$i<this.inputs.length;$i++){
			$currentInput = this.inputs.eq($i);
			var $type = $currentInput.attr('id');
			switch($type){
				case 'UserEmail':
					if(this.validateEmail($currentInput.val()))
						$count++;
					break;
				case 'UserPassword':
					if(this.validatePassword($currentInput.val(), 4, 16))
						$count++;
					break;
				case 'UserUrl':
					if(this.validateUrl($currentInput.val()))
						$count++;
					break;
			}
		}
		return $count;
	},
	
	/**
	 * check if email legal
	 * 
	 * @param value email string value
	 * @return boolean if the value is legal
	 * @accesss public
	 */
	validateEmail: function(value){
		var reg=/^\w{1,}@\w+(\.\w+)+$/;
		if(!reg.test(value)){
			//alert("email inlegal!");
			return false;
		}
		else{
			return true;
		}
	},
	/**
	 * @param value password string
	 * @param minBits minimum length of password
	 * @param maxBis maximum length of password
	 * @return boolean if the value is legal
	 * @access public
	 */
	validatePassword: function(value, minBits, maxBits){
		if(minBits > value.length || maxBits < value.length){
			//alert("password inlegal, length must be between "+ minBits + " and "+maxBits);
			return false;
		}
		return true;
	},
	
	/**
	 * @param value url string
	 * @return whether the url is legal
	 * @access public
	 */
	validateUrl: function(value){
		// check if there is an existing url already
		if(value.length == 0)
			return false;
		return true;
	},
	
	addDomain : function(){
		var $urlInput = $("#UserUrl");
		var $domain = $("<div>.dorimeme.com</div>");
		$domain.css({"display": "inline", "margin-left": "-90px"});
		
		$domain.insertAfter($urlInput);
		this.urlRestriction();
	},
	
	urlRestriction : function(){
		var $urlInput = $("#UserUrl");
		$urlInput.keypress(function(event){
			if(event.which==46){
				alert("dot is not permitted");
				return false;
			}
		});
	}
}




/**
 * Represent the login form
 * @param {Object} formSel
 */
function LoginForm(formSel) {
	this.$form = $(formSel);
	// hiders are divs of user-name and password
	this.$hiders = this.$form.find(".input:not('.signIn')").hide();
	this.$inputs = this.$hiders.children("input");

	this.initInputs();
	this.send = false;
	this.$form.submit($.proxy(this.submit, this));
}

LoginForm.prototype ={
		submit : function(){
			if(this.send){
				return true;
			}else{
				this.$hiders.show();
				this.send = true;
				return false;
			}
		},
		/**
		 * initialize backgrounds of inputs when focus, blur
		 */
		initInputs : function(){
			this.$inputs.each(function(index, input){
				$input = $(input);
				$input.css("background-position", "0 -" + 29*(index+1)+"px");
				$input.focus(function(){
					$(this).css("background-position", "0 0");
				});
				$input.blur(function(){
					if(!$(this).val()){
						$(this).css("background-position", "0 -" + 29*(index+1)+"px");
					}
				});
			});
		}
}










/**
 * Representing the slide show div
 * @param {Object} slideShowSel slide show selector
 */
function SlideShow(slideShowSel){
	this.$container = $(slideShowSel);
	this.$rows = this.$container.children(".showRow");
	
	this.$container.css("position", "relative");
	this.$rows.css("position", "absolute");
	
	this.$rows.each(function(index, row){
		$(row).css("top", 196*(index)+"px");
	});

}

index = 0;
size = 32;

odd = true;
function createLi(){
	
	// create new li and its children
	var $newLi = $("<li></li>");
	var $newA = $("<a href='#'></a>");
	
	index = (index + 1) % size;
	temp = index + 1;
	var imgUrl = "/dorimeme/app/webroot/img/pic/ex/action-photos-"+temp+".jpg";
	$newA.css("background", "url('"+imgUrl+"') no-repeat scroll 0 0 transparent");

	var $newSpan = $("<span></span>");
	$newSpan.text(liName[index%7]);
	
	// organize them into a tree
	$newA.append($newSpan);
	$newLi.append($newA);
	return $newLi;
	
}

SlideShow.prototype = {
	/**
	 * insert new li before the first element
	 * @param {Object} $newLi
	 * @param {Object} rowNum
	 */
	insertLi : function($newLi, rowNum){
		// insert newLi ul
		$rowN = $(this.$rows.get(rowNum));
		$rowN.width("784px");
		$rowN.css("left","-196px");
		$newLi.insertBefore($rowN.children().first());
		if (this.$rows.get(rowNum + 1)) {
			this.insertLi($rowN.children().last().clone(), rowNum + 1);
		}
	},
	
	/**
	 * move every row to right in order
	 * @param {Object} rowNum
	 */
	animateUls : function(rowNum){
		// make sure all paras can work
		if(!rowNum){
			rowNum = 0;
		}
		_this = this;
		var $thisRow = $(this.$rows.get(rowNum));
		
		// animate thisRow ,when animation ends,call the next row to animate
		$thisRow.animate({left : "0px"}, 1500,function(){
			if (_this.$rows.get(rowNum + 1)) {
				_this.animateUls(rowNum + 1);
			}else{
				// when there is no more rows, remove last li in every line
				_this.removeLi();
			}
		});
	},
	
	/**
	 * remove last li in all rows
	 */
	removeLi : function(){
		this.$rows.each(function(){
			$(this).children().last().remove();
		});
	},
	
	/**
	 * this function is called when we get a new li to insert
	 * it will refresh slide show smoothly
	 */
	refresh : function(){
		this.insertLi(createLi(), 0);
		this.animateUls(0)
	}
}



	var liName = ["music", "art", "creative", "speed", "action", "technology", "behavior"];

$(document).ready(function(){

	var $as = $("#slideShow li a");
	var prefix = "/dorimeme/app/webroot/img/pic/ex/action-photos-";
	$as.each(function(index, elem){
		var imgUrl = prefix;
		var index2 = 30- index;
		imgUrl += index2;
		imgUrl +=".jpg";
		$(elem).css("background", "url('"+imgUrl+"') no-repeat scroll 0 0 transparent");
		$(elem).children().text(liName[index%7]);
	});
	
	var loginForm = new UserForm('#UserRegForm','#signUp');

	$('#UserLoginForm label').css("display","none");
	var login = new LoginForm("#UserLoginForm");

	slideshow = new SlideShow("#content #slideShow");
	setInterval('slideshow.refresh()',9000);
});